<template>
	<div class="table-main">
		<div class="titles">
			<p>时段管理</p>
			<authCheck />
			<el-button
				size="small"
				v-if="authorize == 1"
				@click="onTimeAdd"
				type="primary"
				>增加</el-button
			>
		</div>
		<div class="table-container">
			<div class="search-container">
				<el-form :inline="true" size="small">
					<el-form-item label="季节：">
						<el-select
							v-model="page.costManageIndexId"
							placeholder="请选择季节"
							@focus="onFocus"
							@change="onChange"
							clearable
						>
							<el-option
								v-for="item in seasonList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<el-table
				:data="timeData"
				v-loading="loading"
				style="width: 100%-44px"
				height="calc(100% - 76px)"
			>
				<el-table-column label="开始时间" prop="beginTime"> </el-table-column>
				<el-table-column label="结束时间" prop="endTime"> </el-table-column>
				<el-table-column label="时段类型" prop="type" :formatter="typeFormat">
				</el-table-column>
				<el-table-column label="用电电价" prop="consumePrice">
				</el-table-column>
				<el-table-column label="上网电价" prop="generatePrice">
				</el-table-column>
				<el-table-column label="需量电价" prop="demandPrice"> </el-table-column>
				<el-table-column label="操作" v-if="authorize">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="normass"
							@click="handleSeasonEdit(scope.row)"
							>编辑</el-button
						>
						<el-button
							size="mini"
							type="danger"
							@click="handleSeasonDelete(scope.row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<div class="table-pagination">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page.pageNum"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</div>

		<el-dialog
			:title="titleDialog"
			:visible.sync="dialogVisible"
			width="385px"
			append-to-body
			:close-on-click-modal="false"
		>
			<el-form
				ref="timeForm"
				:model="timeForm"
				:rules="timeRules"
				label-width="100px"
				size="small"
			>
				<el-form-item label="季节：" prop="costManageIndexId">
					<el-select
						v-model="timeForm.costManageIndexId"
						placeholder="请选择季节"
						@focus="onFocus"
					>
						<el-option
							v-for="item in seasonList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开始时间：" prop="beginTime">
					<el-time-picker
						v-model="timeForm.beginTime"
						format="HH:mm"
						value-format="HH:mm"
						:editable="false"
						:picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
					>
					</el-time-picker>
				</el-form-item>
				<el-form-item label="结束时间：" prop="endTime">
					<el-time-picker
						v-model="timeForm.endTime"
						format="HH:mm"
						value-format="HH:mm"
						:editable="false"
						:picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
					>
					</el-time-picker>
				</el-form-item>
				<el-form-item label="时段类型：" prop="type">
					<el-select v-model="timeForm.type" placeholder="请选择">
						<el-option
							v-for="item in typeDict"
							:key="item.type"
							:label="item.dictLabel"
							:value="item.type"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用电电价：" prop="consumePrice">
					<el-input
						type="number"
						v-model="timeForm.consumePrice"
						style="width: 220px"
					/>
				</el-form-item>
				<el-form-item label="上网电价：" prop="generatePrice">
					<el-input
						type="number"
						v-model="timeForm.generatePrice"
						style="width: 220px"
					/>
				</el-form-item>
				<el-form-item label="需量电价：" prop="demandPrice">
					<el-input
						type="number"
						v-model="timeForm.demandPrice"
						style="width: 220px"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm" size="small"
					>确 定</el-button
				>
				<el-button @click="cancel" size="small">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import authCheck from "@/components/authCheck.vue";
import {
	timeList,
	addTime,
	deleteTime,
	editTime,
	seasonList,
} from "@/api/modules/cost";
import { getDicts } from "@/api/modules/home";

export default {
	components: { authCheck },
	props: {},
	data() {
		return {
			typeDict: [],
			seasonList: [],
			loading: false,
			page: {
				costManageIndexId: "",
				pageNum: 1,
				pageSize: 10,
			},
			total: 0,
			timeData: [],
			formLabelWidth: "100",
			dialogVisible: false,
			titleDialog: "编辑",
			timeForm: {
				costManageIndexId: "",
				beginTime: "",
				endTime: "",
				consumePrice: "",
				demandPrice: "",
				generatePrice: "",
				type: "",
			},
			editId: "",
			timeRules: {
				costManageIndexId: [
					{
						required: true,
						message: "请选择季节",
						trigger: "blur",
					},
				],
				beginTime: [
					{
						required: true,
						message: "请选择开始时间",
						trigger: "blur",
					},
				],
				endTime: [
					{
						required: true,
						message: "请选择结束时间",
						trigger: "blur",
					},
				],
				type: [
					{
						required: true,
						message: "请选择时段类型",
						trigger: "blur",
					},
				],
				consumePrice: [
					{
						required: true,
						message: "请输入用电电价",
						trigger: "blur",
					},
				],
				generatePrice: [
					{
						required: true,
						message: "请输入上网电价",
						trigger: "blur",
					},
				],
				demandPrice: [
					{
						required: true,
						message: "请输入需量电价",
						trigger: "blur",
					},
				],
			},
		};
	},
	watch: {},
	computed: {
		authorize() {
			if (
				this.$route.name !== "lunbo" &&
				this.$store.state.userInfo.authorize == 1
			) {
				return 1;
			} else {
				return 0;
			}
		},
	},
	created() {
		getDicts("peak_valley_type").then((response) => {
			response.data.forEach((item) => {
				item.type = item.dictValue;
			});
			this.typeDict = response.data;
		});
	},
	mounted() {
		this.onFocus("created");
	},
	methods: {
		typeFormat(row, column) {
			let item = this.typeDict.find((item) => row.type == item.dictValue);
			return item.dictLabel;
		},
		onFocus(type) {
			seasonList().then((res) => {
				this.seasonList = res.rows;
				if (type === "created") {
					this.seasonList.length > 0
						? (this.page.costManageIndexId = this.seasonList[0].id)
						: "";
					this.getData(this.page);
				}
			});
		},
		onChange() {
			this.page.pageNum = 1;
			this.getData(this.page);
		},
		//修改每页条数
		handleSizeChange(val) {
			this.page.pageNum = 1;
			this.page.pageSize = val;
			this.getData(this.page);
		},
		// 翻页
		handleCurrentChange(val) {
			this.page.pageNum = val;
			this.getData(this.page);
		},
		getData(page) {
			this.loading = true;
			timeList(page).then((res) => {
				this.timeData = res.rows;
				this.total = res.total;
				this.loading = false;
			});
		},

		onTimeAdd() {
			this.titleDialog = "新增";
			this.dialogVisible = true;
		},
		handleSeasonEdit(row) {
			this.timeForm = {
				costManageIndexId: row.costManageIndexId,
				beginTime: row.beginTime,
				consumePrice: row.consumePrice,
				demandPrice: row.demandPrice,
				endTime: row.endTime,
				generatePrice: row.generatePrice,
				type: String(row.type),
			};
			this.editId = row.id;
			this.titleDialog = "编辑";
			this.dialogVisible = true;
		},
		submitForm() {
			this.$refs.timeForm.validate((valid) => {
				if (valid) {
					if (this.titleDialog === "编辑") {
						let obj = this.timeForm;
						obj.id = this.editId;
						editTime(obj).then((res) => {
							this.getData(this.page);
							this.cancel();
							this.$message({
								type: "success",
								message: "修改成功!",
							});
						});
					} else {
						addTime(this.timeForm).then((res) => {
							this.page.pageNum = 1;
							this.getData(this.page);
							this.dialogVisible = false;
							this.cancel();
							this.$message({
								type: "success",
								message: "新增成功!",
							});
						});
					}
				}
			});
		},
		cancel() {
			this.timeForm = {
				beginTime: "",
				consumePrice: "",
				demandPrice: "",
				endTime: "",
				generatePrice: "",
				type: "",
			};
			this.editId = "";
			this.dialogVisible = false;
		},
		handleSeasonDelete(id) {
			this.$confirm("确定删除此数据吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					deleteTime(id).then((res) => {
						this.getData(this.page);
						this.$message({
							type: "success",
							message: "删除成功!",
						});
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.titles {
	display: flex;
	justify-content: space-between;
	.el-button--primary {
		background-color: #045eed;
		border-color: #045eed;
		height: 36px;
		margin: 10px 10px 0 0;
	}
	.el-button {
		height: 36px;
		margin: 9px 22px 0 0;
	}
}
.table-main {
	height: 100%;
	.table-container {
		padding: 10px 22px;
		height: calc(100% - 55px);
	}
	.el-pagination {
		padding: 10px 5px 2px;
	}
}
</style>
